<template>
  <div class="risk-assessment-template">
    <card title="评估模板库">
      <template #actions>
        <template-header @searchHandle="searchHandle" />
      </template>
      <t-space direction="vertical" style="width: 100%">
        <template-content
          :records="records"
          @deleteHandle="deleteHandle"
          @copyHandle="copyHandle"
          @releaseHandle="releaseHandle"
        />
        <tr class="t-table__empty-row" style="display: flex; justify-content: center" v-if="records.length === 0">
          <div class="t-table__empty">暂无数据</div>
        </tr>
        <t-pagination
          v-model="currentPage"
          :total="total"
          :pageSize.sync="pageSize"
          :pageSizeOptions="pageSizeOptions"
          showJumper
          showPageNumber
          showPageSize
          showPreviousAndNextBtn
          totalContent
          @change="fetchData"
        />
      </t-space>
    </card>
  </div>
</template>

<script>
import Card from '@/components/Card/index.vue';
import TemplateHeader from './components/TemplateHeader.vue';
import TemplateContent from './components/TemplateContent.vue';

import {
  requestPageQsTemplate,
  deleteQsTemplate,
  copyQsTemplate,
  releaseQsTemplate,
} from '@/service/risk-assessment/template';
import { MessagePlugin, DialogPlugin } from 'tdesign-vue';

export default {
  name: 'riskAssessmentTemplate',
  components: { TemplateHeader, TemplateContent, Card },
  data() {
    return {
      // 当前页
      currentPage: 1,
      // 一页个数
      pageSize: 12,
      // 搜索模板名称
      templateName: '',
      // 页面个数配置项
      pageSizeOptions: [8, 12, 16, 24, 36],
      // 总个数
      total: 0,
      // 模板数据
      records: [],
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    // 请求页面数据
    fetchData() {
      requestPageQsTemplate({
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        templateName: this.templateName,
      }).then((res) => {
        this.total = res.total;
        this.records = res.records;
      });
    },
    searchHandle(val) {
      this.templateName = val;
      this.fetchData();
    },
    // 删除操作
    deleteHandle(id) {
      const dialog = DialogPlugin.confirm({
        theme: 'warning',
        header: '警告',
        body: '再次确认是否删除模板？',
        onConfirm: () => {
          deleteQsTemplate(id).then((res) => {
            if (!res || res.isError) return;
            MessagePlugin.success('删除成功');
            if (this.records.length === 1 && this.currentPage > 1) {
              this.currentPage -= 1;
            }
            dialog.destroy();
            this.fetchData();
          });
        },
      });
    },
    copyHandle(id) {
      copyQsTemplate(id).then((res) => {
        if (!res || res.isError) return;
        MessagePlugin.success('复制成功');
        this.fetchData();
      });
    },
    releaseHandle(id) {
      releaseQsTemplate(id).then((res) => {
        if (!res || res.isError) return;
        MessagePlugin.success('发布成功');
        this.fetchData();
      });
    },
  },
};
</script>
